<template>
  <div v-if = this.show>
    <van-row>
      <van-col span="20">
        
    <van-cell-group inset>
  <van-cell @click="playIt()">
  <!-- <h1>播放列表</h1> -->
    <van-row>
    <van-col span="6">
        <!--cd图片 圆形图片 -->
        <van-image
          round
          width="3rem"
          height="3rem"
          :src="this.MusicIcon"
          />   
          
      </van-col>
      <van-col span="18">
        <div style="display:flex; align-items: center; justify-content: flex-start;">
          <h4>歌名: {{this.MusicName}}</h4>-<label>作者: {{this.MusicAuthor}}</label>
        </div>
      
      </van-col>
 
    </van-row>
  </van-cell>
  </van-cell-group>
      </van-col>
           <!--删除按钮 -->
      <van-col span="4">
        <div style="display: flex;  ">
           <!-- <van-button  type="info" @click="deleteIt()" round size="small"> 删除</van-button> -->
           <van-icon size="2rem" @click="deleteIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%A0%E9%99%A4%20%283%29.png"></van-icon>
        </div>
        
      </van-col>
    </van-row>

  </div>
</template>

<script>
import { Toast } from 'vant'
import PlayListAPI from '@/api/PlayListAPI'
export default {
name: "page2playList",


data() {
  return {
    pageUrl: '',
    show : true,
  }
},
methods:{
    playIt(){
      this.$bus.$emit("playUrl",this.MusicUrl)
    },
    deleteIt(){
     var result = PlayListAPI.delete2PlayList(this.MusicId)
     // 获取返回结果
    
      result.then((val)=>{
        console.log(val)
        if(val.success){
          this.$toast("删除成功")
      // 将数据存到list里面
          // this.list=val.data
          //  this.$router.go(0)
          this.show=false
          // this.getMusicPlayList()
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },

    // getMusicPlayList(){
    //   var result = PlayListAPI.getMusicPlayList()
    //   // 获取返回结果
    //   result.then((val)=>{
    //     console.log(val)
    //     if(val.success){
    //       // console.log("查询成功！！！")
    //   // 将数据存到list里面
    //       this.list=val.data
  
    //     }else{
    //       console.log(val.errorMsg)
    //       this.$toast(val.errorMsg)
    //     }
    //         })
    // },
},

mounted(){
  this.pageUrl = this.MusicUrl
},
  props: {
        // 音乐的 id
    // 为啥在这里要封装一个 id 属性呢？
    // 原因:将来,子组件中商品的勾选状态变化之后, 需要通过子 -> 父的形式,
    // 通知父组件根据 id 修改对应商品的勾选状态。
    Id: {
      required: true,
      type: String
    },
    UserId: {
      required: true,
      type: String
    },
    MusicId: {
      required: true,
      type: String
    },
    MusicName: {
      required: true,
      type: String
    },
    MusicAuthor: {
      required: true,
      type: String
    },
    MusicUrl: {
      required: true,
      type: String
    },
    MusicIcon: {
      required: true,
      type: String
    }
    
    }

  }


</script>

<style lang="less">

</style>